<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>


	<body>
		<canvas width="1000px" height="700px" id="my canvas"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("my canvas");
			var ctx = canvas.getContext("2d");
			//			var arcx=50;
			//			var arcy=50;
			//			var arcr=30;
			//			var arc_vx=4;
			//			var arc_vy=0;
			var arry = [
//				[20, 20, 10, 1, 1, "green"],
//				[30, 30, 10, 3, 0.3, "red"],
//				[10, 0, 10, 2, 0.5, "blue"]
			];
			var r,g,b;
			setInterval(function() {
				for(i=0;i<30;i++){
				var vx=parseInt(Math.random()*5)+1;
				if(Math.random()>0.5){
					vx=-vx;
				}
				var vy=parseInt(Math.random()*15)+10;
				var r=parseInt(Math.random()*256);
				var g=parseInt(Math.random()*256);
				var b=parseInt(Math.random()*256);
				
               arry.push([500,350,5,vx,-vy,"rgb("+r+","+g+","+b+")"]);
			}}, 1000);


			setInterval(function() {
				ctx.beginPath();
				ctx.fillStyle = "rgba("+ r +","+ g +","+ b +",0.3)";
				ctx.fillRect(0, 0, 1000, 700);


				//				arcx=arry[i][0];
				//				arcy=arry[i][1];
				//				arcr=arry[i][2];
				//				arc_vx=arry[i][3];
				//				arc_vy=arry[i][4];
				//				arccolor=ayy[i][5];
				for(var i = 0; i < arry.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arry[i][5];
					ctx.arc(arry[i][0],arry[i][1],arry[i][2], 0,2 * Math.PI);
					ctx.fill();


					arry[i][1] = arry[i][1] + arry[i][4];
					arry[i][4] = arry[i][4] + 0.5;


					arry[i][0] = arry[i][0] + arry[i][3];


//					if(arry[i][1] > 700 - arry[i][2]) {
//						arry[i][4] = -arry[i][4];
//						arry[i][4] = arry[i][4] * 0.7;
//						arry[i][1] = 700 - arry[i][2];
//					}
//					if(arry[i][0] > 1000 - arry[i][2]) {
//						arry[i][3] = -arry[i][3];
//						arry[i][0] = 1000 - arry[i][2];
//					}
					if(arry[i][0] < arry[i][2]) {
						arry[i][3] = -arry[i][3];
						arry[i][0] = arry[i][2];
					}
				}
			}, 16);
		</script>
	</body>


</html>